<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>jQuery Image Caption Slide - jCapSlide</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="jQuery Image Caption Slide - jCapSlide" />
        <meta name="keywords" content="jquery, plugin, image, caption, fancy, sliding" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
        <style>
            body{
                background: #F5FAFB url(bg.png) repeat-x top left;
                font-family: arial;
                margin:0px;
            }
            .header{
                position:absolute;
                top:0px;
                left:0px;
                width:100%;
                height:77px;
            }
            .header h1{
                color:#777;
                font-size: 38px;
                margin:0px 0px 0px 30px;
                font-weight:100;
                line-height:80px;
                padding:0px;
            }
            .footer{
                width:100%;
                margin:10px 0px 5px 0px;
            }
            a img{
                border:none;
                outline:none;
            }
            .ad{
                position:absolute;
                right:10px;
                top:5px;
                width:470px;
                height:70px;
            }
            .content{
                margin-top:80px;
                padding:0px;
                bottom:0px;
            }
            .about{
                width:100%;
                height:200px;
                background-color:#AFD9E4;
                border-top:2px solid #fff;
                border-bottom:2px solid #fff;
                clear:both;
            }
            .about .text{
                width:45%;
                margin:5px 2% 10px 2%;
                height:180px;
                float:left;
                color:#444;
                font-size: 12px;
                text-align:justify;
                letter-spacing:0px;
            }
            .about .text h1{
                border-bottom: 1px dashed #fff;
                color:#fff;
            }
            .demo{
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>jCapSlide</h1>
        </div>
        <div class="content">
           
            <div class="demo">
                <div id="capslide_img_cont6" class="ic_container">
                    <img src="images/example2.jpg" width="180" height="240" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont7" class="ic_container">
                    <img src="images/example1.jpg" width="180" height="240" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont8" class="ic_container">
                    <img src="images/example7.jpg" width="180" height="240" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont9" class="ic_container">
                    <img src="images/example8.jpg" width="180" height="240" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont10" class="ic_container">
                    <img src="images/example9.jpg" width="180" height="240" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div style="clear:both;"></div>
             <div class="demo">
                <div id="capslide_img_cont" class="ic_container">
                    <img src="images/example.jpg" width="240" height="180" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont2" class="ic_container">
                    <img src="images/example3.jpg" width="240" height="180" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont3" class="ic_container">
                    <img src="images/example4.jpg" width="240" height="180" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont4" class="ic_container">
                    <img src="images/example5.jpg" width="240" height="180" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont5" class="ic_container">
                    <img src="images/example6.jpg" width="240" height="180" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont11" class="ic_container">
                    <img src="images/example10.jpg" width="240" height="180" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont12" class="ic_container">
                    <img src="images/example11.jpg" width="240" height="180" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="demo">
                <div id="capslide_img_cont13" class="ic_container">
                    <img src="images/example12.jpg" width="240" height="180" alt=""/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">
                        <p class="ic_category">Category</p>
                        <h3>Amazing Image Title</h3>
                        <p class="ic_text">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div class="about">
                <div class="text">
                    <h1>About</h1>
                    <p>jCapSlide allows you to add a sliding caption to your images.</p>
                    <p>As you can see, it is configurable and let's you define colors, borders and if the title should be initially visible.</p>
                    <p>You can also define a tint color that will overlay the image when hovering over it.</p>
                </div>
               
            </div>
        </div>
        
    
        <div class="footer"><a href="http://www.tympanus.net/codrops/"><img src="codrops_back.png" alt="Back to Codrops"/></a></div> 
        <script type="text/javascript" src="jquery-1.3.2.js"></script>
        <script src="jquery.capSlide.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $("#capslide_img_cont").capslide({
                    caption_color	: 'white',
                    caption_bgcolor	: 'black',
                    overlay_bgcolor : 'black',
                    border			: '',
                    showcaption	    : false
                });
                $("#capslide_img_cont2").capslide({
                    caption_color	: 'black',
                    caption_bgcolor	: '#E6E79C',
                    overlay_bgcolor : '#E6E79C',
                    border			: '',
                    showcaption	    : true
                });
                $("#capslide_img_cont3").capslide({
                    caption_color	: '#fff',
                    caption_bgcolor	: '#000',
                    overlay_bgcolor : 'blue',
                    border			: '',
                    showcaption	    : true
                });
                $("#capslide_img_cont4").capslide({
                    caption_color	: 'black',
                    caption_bgcolor	: '#f68a21',
                    overlay_bgcolor : '#f68a21',
                    border			: '',
                    showcaption	    : false
                });
                $("#capslide_img_cont5").capslide({
                    caption_color	: 'black',
                    caption_bgcolor	: 'white',
                    overlay_bgcolor : '#CE9B9B',
                    border			: '4px solid #CE9B9B',
                    showcaption	    : true
                });
                $("#capslide_img_cont6").capslide({
                    caption_color	: 'black',
                    caption_bgcolor	: 'white',
                    overlay_bgcolor : '#832EA5',
                    border			: '10px solid #ccc',
                    showcaption	    : true
                });
                $("#capslide_img_cont7").capslide({
                    caption_color	: '#fff',
                    caption_bgcolor	: '#549360',
                    overlay_bgcolor : '#549360',
                    border			: '10px solid #549360',
                    showcaption	    : true
                });
                $("#capslide_img_cont8").capslide({
                    caption_color	: '#fff',
                    caption_bgcolor	: '#d13f68',
                    overlay_bgcolor : '#d13f68',
                    border			: '10px solid #d13f68',
                    showcaption	    : true
                });
                $("#capslide_img_cont9").capslide({
                    caption_color	: '#660e3a',
                    caption_bgcolor	: '#3fa6d1',
                    overlay_bgcolor : '#3fa6d1',
                    border			: '10px solid #3fa6d1',
                    showcaption	    : true
                });
                $("#capslide_img_cont10").capslide({
                    caption_color	: '#fff',
                    caption_bgcolor	: '#549360',
                    overlay_bgcolor : '#549360',
                    border			: '10px solid #549360',
                    showcaption	    : true
                });
                $("#capslide_img_cont11").capslide({
                    caption_color	: '#fff',
                    caption_bgcolor	: '#000',
                    overlay_bgcolor : '#f9ca8d',
                    border			: '4px solid #000',
                    showcaption	    : true
                });
                $("#capslide_img_cont12").capslide({
                    caption_color	: '#bfedfa',
                    caption_bgcolor	: '#000',
                    overlay_bgcolor : '#000',
                    border			: '4px solid #444',
                    showcaption	    : false
                });
                $("#capslide_img_cont13").capslide({
                    caption_color	: '#000',
                    caption_bgcolor	: '#efa609',
                    overlay_bgcolor : '#efa609',
                    border			: '4px solid #ccc',
                    showcaption	    : true
                });

            });
        </script>
    </body>
</html>